<template> 
  <el-card class="form-container" shadow="never">
    <div style="margin-left:20%">
    <el-steps :active="active" finish-status="success" align-center>
      <el-step title="基本信息"></el-step>
      <el-step title="商品详情"></el-step>
      <el-step title="商品规格"></el-step>
    </el-steps>
    <product-base-detail
      v-show="showStatus[0]"
      v-model="productParam"
      :is-edit="isEdit"
      @nextStep="nextStep">
    </product-base-detail>
    <product-desc-detail
      v-show="showStatus[1]"
      v-model="productParam"
      :is-edit="isEdit"
      @nextStep="nextStep"
      @prevStep="prevStep">
    </product-desc-detail>
    <product-spec-detail
      v-show="showStatus[2]"
      v-model="productParam"
      :is-edit="isEdit"
      @prevStep="prevStep"
      @finishCommit="finishCommit">
    </product-spec-detail>
    </div>
  </el-card>
</template>
<script>
  import ProductBaseDetail from './ProductBaseDetail';
  import ProductDescDetail from './ProductDescDetail';
  import ProductSpecDetail from './ProductSpecDetail';

  import {getObj,putObj} from 'api/shop/goods/goods/index';
  import {getPicklist} from 'api/param/picklist/index';
  import {getAllShopList} from 'api/shop/shops/index';
  import { getToken } from 'utils/auth';
  import { fetchTree } from 'api/shop/goods/category/index';
  import { mapGetters } from 'vuex';

  const defaultProductParam = {
    goodsId:0,
    maximumProduct:0,
    activityStatus: 0,
    categoryName: '',
    checkStatus: 0,
    currentPrice: 0,
    memberPrice:0,
    menchantPrice: 0,
    minimumProduct: 1,
    mkCategoryCode: '',
    name:'',
    deleteStatus: 0,
    description: '',
    onlyPayMethod: 0,
    oringinalPrice: 0,
    postFreeNum: 0,
    recommendStatus: 0,
    shopId: 0,
    showSoldNum: 0,
    showStatus: 1,
    simpleTitle: '',
    soldNum: 0,
    status: 0,
    stockStatus: 0,
    title: '',
    titleImage: ''
  };
  export default {
    name: 'ProductDetail',
    components: {ProductBaseDetail, ProductDescDetail, ProductSpecDetail},
    props: {
      isEdit: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        active: 0,
        productParam: Object.assign({}, defaultProductParam),
        showStatus: [true, false, false]
      }
    },
    created(){
      if(this.isEdit){
        getObj(this.$route.query.id).then(response=>{
          console.log("goods=" + response.data.name)
          this.productParam=response.data;
        });
      }
    },
    methods: {
      hideAll() {
        for (let i = 0; i < this.showStatus.length; i++) {
          this.showStatus[i] = false;
        }
      },
      prevStep() {
        if (this.active > 0 && this.active < this.showStatus.length) {
          this.active--;
          this.hideAll();
          this.showStatus[this.active] = true;
        }
      },
      nextStep() {
        if (this.active < this.showStatus.length - 1) {
          this.active++;
          this.hideAll();
          this.showStatus[this.active] = true;
        }
      },
      finishCommit(isEdit) {
        this.$confirm('是否要提交该产品', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if(isEdit){
            putObj(this.$route.query.id,this.productParam).then(response=>{
              this.$message({
                type: 'success',
                message: '提交成功',
                duration:1000
              });
              this.$router.back();
            });
          }else{
            addObj(this.productParam).then(response=>{
              this.$message({
                type: 'success',
                message: '提交成功',
                duration:1000
              });
              location.reload();
            });
          }
        })
      }
    }
  }
</script>
<style>
  .form-container {
    width: 100%;
  }
</style>


